iT邦幫忙

2023 iThome 鐵人賽

DAY 26
0
Modern Web

基礎網頁開發30天系列 第 26

Day 26 CSS按鍵美化

  • 分享至 

  • xImage
  •  
button#allButton {
    position: relative;
    min-width: 160px;
    background: transparent;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: pointer;
}
button#allButton span {
    color: #FFFFFF;
    mix-blend-mode: difference;
}
button#allButton:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 100%;
    border-radius: 50px;
    background: black;
    transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
button#allButton:hover:before {
  background: black;
  width: 100%;
}
  1. button#allButton:這是CSS選擇器,用於選中具有ID為"allButton"的<button>元素。

  2. position: relative;:設置按鈕的定位為相對定位,這意味著按鈕的位置參考自身的位置。

  3. min-width: 160px;:設置按鈕的最小寬度為160像素。

  4. background: transparent;:將按鈕的背景設置為透明。

  5. border: none;:移除按鈕的邊框。

  6. border-radius: 50px;:設置按鈕的邊框半徑為50像素,使按鈕呈現圓形外觀。

  7. font-size: 1rem;:設置按鈕的字體大小為1rem。

  8. font-weight: bold;:設置按鈕的字體加粗。

  9. text-align: center;:將按鈕內容居中對齊。

  10. text-decoration: none;:移除文本的下劃線。

  11. text-transform: uppercase;:將文本轉換為大寫。

  12. padding: 10px 20px;:設置按鈕的內邊距,分別為10像素的上下內邊距和20像素的左右內邊距。

  13. cursor: pointer;:將滑鼠游標設置為手型,以指示按鈕可以被點擊。

  14. button#allButton span:這是對按鈕內的<span>元素進行樣式設置的CSS選擇器。

  15. color: #FFFFFF;:設置<span>元素的文字顏色為白色。

  16. mix-blend-mode: difference;:使用不同的混合模式來處理元素的內容和背景之間的混合效果。

  17. button#allButton:before:這是使用伪元素 ::before 選擇器為按鈕添加一個伪元素,用於實現按鈕的背景動畫效果。

  18. content: '';:設置伪元素的內容為空,這是必需的。

  19. position: absolute;:將伪元素的定位設置為絕對定位,使其相對於父元素按鈕進行定位。

  20. top: 0;left: 0;:將伪元素的位置設置在按鈕的左上角。

  21. width: 52px;height: 100%;:設置伪元素的寬度為52像素,高度為100%(與按鈕相同的高度)。

  22. border-radius: 50px;:設置伪元素的邊框半徑為50像素,使其呈現圓形。

  23. background: black;:設置伪元素的背景顏色為黑色。

  24. transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);:設置伪元素的過渡效果,使其在0.85秒內變化,使用自定義的貝塞爾曲線函數。

  25. button#allButton:hover:before:這是當滑鼠懸停在按鈕上時應用的CSS規則,用於修改伪元素的背景以實現動畫效果。

  26. background: black;:當滑鼠懸停在按鈕上時,將伪元素的背景設置為黑色。

  27. width: 100%;:將伪元素的寬度設置為100%,使其從左邊擴展到整個按鈕的寬度,從而創建一個動畫效果。

製作成果如下:

觸發前:
https://ithelp.ithome.com.tw/upload/images/20231010/20162177x4v0p6kbpF.png

觸發後:
https://ithelp.ithome.com.tw/upload/images/20231010/201621770pEmEt4Ocr.png


上一篇
Day 25 獲取笑話
下一篇
Day 27 CSS動畫
系列文
基礎網頁開發30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言